body,html{
  height: 100%;
}
body{
  display: flex;
  flex-direction: column;
}
header{
  background: blue;
}
section{
  flex: 1;
  display: flex;
  flex-direction: row;
}
.main{
  background: red;
  flex: 1;
}
.left{
  background: green;
  flex: 0 0 100px;
  order: -1;
}
.right{
  background: beige;
  flex: 0 0 100px;
}
footer{
  background: pink;
}

@media(max-width:700px){
  section{
    flex-direction: column;
  }
}